<template>
<el-form :model="ruleForm2" status-icon :rules="rules2" label-position="left" label-width="0px" ref="ruleForm2"  class="demo-ruleForm login-container">
  <h3 class="title">系统登录</h3>
  <el-form-item prop="account">
    <el-input type="text" v-model="ruleForm2.account" autocomplete="off" auto-complete="off" placeholder="账号"></el-input>
  </el-form-item>
  <el-form-item prop="checkPass">
    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off" auto-complete="off"  placeholder="密码"></el-input>
  </el-form-item>
  <el-form-item style="width:100%">
    <el-button type="primary" @click="submitForm('ruleForm2')" style="width:100%;" :loading="logining">提交</el-button>
  </el-form-item>
</el-form>
</template>
<script>
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value !== '123456') {
        callback(new Error('请输入正确的密码'))
      } else {
        callback()
      }
    }
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else if (value !== 'admin') {
        callback(new Error('请输入正确的账号'))
      } else {
        callback()
      }
    }
    return {
      logining: false,
      ruleForm2: {
        account: 'admin',
        checkPass: '123456'
      },
      rules2: {
        account: [
          { validator: validateAccount, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      console.log(formName)
      this.logining = true
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          let that = this
          setTimeout(function () {
            console.log('submit!!')
            that.logining = false
            console.log(that.ruleForm2.account)
            sessionStorage.setItem('username', that.ruleForm2.account)
            that.$router.push({ path: '/page4' })
          }, 3000)
        } else {
          console.log('error submit!!')
          this.logining = false
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="stylus">
@import '../style/com.styl'
  .login-container
    -webkit-border-radius 5px
    border-radius 5px
    -moz-border-radius 5px
    background-clip padding-box
    margin 180px auto
    width 350px
    padding 35px 35px 15px 35px
    background #fff
    border 1px solid $rem
    box-shadow 0 0 25px #cac6c6
    .title
      margin 0px auto 40px auto
      text-align center
      color #505458
</style>
